<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>生命周期</title>
</head>
<body>
<div id="app">
</div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  //生命周期：beforeCreate created
  //          beforeMount   mounted
  //          beforeUpdate  updated
  //          beforeDestroy destroyed
  let vm = new Vue({
    // el: '#app',  3. 要保证有编译的元素
    data: {
      msg: 'hello world!',
      b :100

    },
    beforeCreate() {  //1.此方法用不到
      //debugger;
    },
    created(){  //2.【※很重要】 ajax,初始化操作
      //debugger;
    },
    template:'<div id="app">{{msg}}</div>',  //4. 如果有template属性会用模板替换掉外部html，只要有此属性app中的内容就没有任何意义了,只能有一个根元素，不能是文本节点
    beforeMount() { // 5.编译前，没有什么实际意义

    },
    mounted(){  // 6.【※很重要】 真实dom渲染完了，可以操作dom了

    },
    beforeUpdate() {  //更新前,一般用watch来替换掉
    },
    updated() { //更新后， 一般用watch来替换掉
    },
    beforeDestroy() { //【※很重要】 销毁前 可以清除定时器，或者 清除 事件绑定
      alert('销毁前')
    },
    destroyed(){  //销毁后
      alert('销毁后')
    }



  })

  vm.$mount('#app') //3. 要保证有编译的元素

  vm.$destroy();
</script>
</html>
